<template>
<!-- 我的页面 -->
  <div class="my-container" :border="false">
        <van-cell-group v-if="user" class="my-info">
           <van-cell class="base-info" center>
                <van-image class="avator" slot="icon" width="50" height="50" round :src="currentUser.photo" />
                <span class="name" slot="title">{{currentUser.name}}</span>
                <van-button class="updata-btn" size="small" round>编辑信息</van-button>
            </van-cell>
            <van-grid class="data-info" :border="false">
                <van-grid-item class="data-info-item">
                    <div class="text-warp" slot="text">
                        <div class="num">{{currentUser.art_count}}</div>
                        <div class="text">头条</div>
                    </div>
                </van-grid-item>
                <van-grid-item class="data-info-item">
                    <div class="text-warp" slot="text">
                        <div class="num">{{currentUser.fans_count}}</div>
                        <div class="text">关注</div>
                    </div>
                </van-grid-item>
                <van-grid-item class="data-info-item">
                    <div class="text-warp" slot="text">
                        <div class="num">{{currentUser.follow_count}}</div>
                        <div class="text">粉丝</div>
                    </div>
                </van-grid-item>
                <van-grid-item class="data-info-item">
                    <div class="text-warp" slot="text">
                        <div class="num">{{currentUser.like_count}}</div>
                        <div class="text">获赞</div>
                    </div>
                </van-grid-item>
            </van-grid>
        </van-cell-group>

        <div v-else class="not-login" @click="denglu">
            <div>
                <img class="mobile" src="./shouji.png" alt="">
            </div>
            <div class="text">登录 / 注册</div>
        </div>

        <van-grid class="nav-grid" :column-num="2">
            <van-grid-item class="nav-grid-item" icon-prefix="toutiao" icon="shoucang" text="收藏" />
            <van-grid-item class="nav-grid-item" icon-prefix="toutiao" icon="lishi" text="历史" />
        </van-grid>

        <div class="link-to">
            <van-cell title="消息通知" is-link to="index" />
            <van-cell title="小智同学" is-link to="index" />
        </div>

        
        <van-cell v-if="user" class="logout-cell" title="退出登录" center @click="onLogout" />
  </div>
</template>


<script>

import {mapState} from 'vuex'
import { Dialog } from 'vant'
import {getCurrentUser} from '@/api/user'


export default {
    data(){
        return{
            currentUser:{}
        }
    },
    methods:{
        async loadCurrentUser(){
            const {data} = await getCurrentUser();
            this.currentUser = data.data;
            // console.log(this.currentUser)
        },
        denglu(){
            this.$router.push("./login/");
        },
        // 推出登录
        onLogout(){
            this.$dialog.confirm({
            title: '确认退出吗',
            message: '',
            })
            .then(() => {
                // on confirm
                //确认后改变vuex里面的state.user值，将这个值变为空。页面自动更新
                this.$store.state.user = null;
            })
            .catch(() => {
                // on cancel
            });
        }
    },
    computed:{
        ...mapState(['user'])
    },
    created(){
        this.loadCurrentUser()
    }
}
</script>

<style lang="less" scoped>
    .my-info{
        background: url("./banner.png") no-repeat;
        background-position:center center;
        background-size: 100% 100%;
        .base-info{
            height:115px;
            box-sizing: border-box;
            padding-top:38px;
            padding-bottom:11px;
            background-color:transparent;
            .avator{
               box-sizing: border-box; 
               width: 66px;
               height:66px;
               border:1px solid #fff;
               margin-right: 11px;
            }
            .name{
                color:#fff;
                font-size:15px;
            }
            .updata-btn{
                height: 16px;
                color:#666;
                font-size: 10px;
            }
        }
        .data-info{
            .data-info-item{
                height: 65px;
                color:#fff;
               /deep/ .van-grid-item__content{
                    background-color:transparent;
                }
                .text-warp{
                    text-align: center;
                    justify-content: center;
                    .num{
                        font-size: 18px;
                    }
                    .text{
                        font-size: 11px;
                    }
                }
            }
        }
    }

    .not-login{
        height: 180px;
        background: url("./banner.png") no-repeat;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction:column;
        .mobile{
            width: 66px;
            height: 66px;
        }
        .text{
            color:#fff;
            font-size:14px;
        }
    }

    /deep/.nav-grid{
        .nav-grid-item{
            height:70px;
            .toutiao{
                font-size:22px;
            }
            .toutiao-lishi{
                color:#eb5253;
            }
            .toutiao-shoucang{
                color:#ff9d1d;
            }
            .van-grid-item__text{
                font-size:14px;
                color:#333;
            }
        }
    }
    .link-to{
        margin: 10px 0;
    }
    .logout-cell{
        text-align:center;
        color:#d86262;
        background-color:#fff;
    }
    .van-cell::after{
        border-bottom:none;
    }
</style>